<template>
  <div>
    <div class="title_build_agent">
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="build_search_input">
      <mt-search v-model="value"
                 cancel-text="取消">
        <mt-cell v-if="resultShow === 1"
                 v-for="item in result"
                 :title="item.name"
                 :key="item.id"
                 @click.native="getBuildAgent(item.name)">
        </mt-cell>
      </mt-search>
    </div>
    <div :class="{build_search_content:resultShow === 2}">
      <div v-if="resultShow === 2 && buildAgentList" class="gold_modal_com" v-for="item in buildAgentList">
        <div class="photo_information">
          <div class="photo">
            <img :src="item.user.photo" alt="">
          </div>
          <div>
            <div class="photo_text">
              <div>{{item.user.account}}</div>
              <div>{{item.user.department_id}}</div>
              <div>{{item.user.store_id}}</div>
            </div>
          </div>
        </div>
        <div class="go_right">
          <span @click="goWebsiteData(item.user.id)" class="iconfont icon-icon--"></span>
        </div>
      </div>
      <div v-show="buildAgentData.last_page !== 0">
        <div class="btnLoadMore" v-show="page !== buildAgentData.last_page" @click="loadMore">
          点击加载更多
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue';
  import {Search, Cell} from 'mint-ui';

  Vue.component(Search.name, Search);
  Vue.component(Cell.name, Cell);
  import TitleGoBack from '../../components/common/TitleGoBack';
  import {premiseLike, premiseAgent} from '../../axios/api';

  export default {
    name: 'BuildSearchAgent',
    data() {
      return {
        title: '按楼盘找经纪人',
        resultShow: 0,
        value: '',
        result: [],
        buildAgentList: [],
        buildAgentData: {},
        page:1,
      }
    },
    watch: {
      value(values) {
        if (values !== '') {
          console.log(values);
          premiseLike(this.value).then(res => {
            console.log(res);
            this.result = res.data.data;
          }).catch(err => {
            console.log(err);
          });
          this.resultShow = 1;
        } else {
          console.log(values);
          // this.resultShow = 0;
        }
      }
    },
    methods: {
      //加载更多
      loadMore(){

      },
      getBuildAgent(name) {
        console.log(name);
        premiseAgent(name).then(({data}) => {
          this.buildAgentData = data;
          console.log(this.buildAgentData,'----------');
          let i = 0;
          let jinjiren = [];
          let jinjirenList = [];
          console.log(data);
          for (; i < data.data.length; i++) {
            jinjiren.push(data.data[i].adviser_list);
          }
          for (let j = 0; j < jinjiren.length; j++) {
            if (jinjiren[j].length) {
              for (let k = 0; k < jinjiren[j].length; k++) {
                jinjirenList.push(jinjiren[j][k])
              }
            }
          }
          this.buildAgentList = jinjirenList;
          console.log(this.buildAgentList);
          this.resultShow = 2;
        }).catch(err => {
          console.log(err);
        });

      },
      //  经纪人主页(详情)
      goWebsiteData(id){
        this.$router.push('/RealtorWebsite/' + id);
      }
      //获取楼盘

    },
    components: {
      TitleGoBack
    }
  }
</script>

<style scoped>
  .build_search_input {
    /*height: 30px;*/
    /*background: #e6191e;*/
    /*padding: 10px;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
  }

  .title_build_agent {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 99;
  }

  /*.build_search_input .input {*/
  /*height: 30px;*/
  /*background: #ffffff;*/
  /*width: calc(100% - 20px - 2em);*/
  /*border-radius: 5px;*/
  /*}*/

  /*.build_search_input .search {*/
  /*color: #ffffff;*/
  /*line-height: 30px;*/
  /*}*/

  /*.build_search_input input {*/
  /*-web-kit-appearance: none;*/
  /*-moz-appearance: none;*/
  /*outline: 0;*/
  /*border: none;*/
  /*height: 28px;*/
  /*font-size: 0.9rem;*/
  /*border-radius: 5px;*/
  /*width: 100%;*/
  /*}*/
.build_search_content{
  position: absolute;
  top: 100px;
  width: 100%;
  left: 0;
  height: 100%;
  z-index: 99;
  background-color: #ffffff;
}
  .gold_modal_com {
    display: flex;
    justify-content: space-between;
    padding: 10px;

  }

  .gold_modal_com .photo_information {
    display: flex;
  }

  .gold_modal_com .photo_information .photo {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }

  .gold_modal_com .photo_information .photo img {
    /*position: absolute;*/
    height: 100%;
    /*left: -20px;*/
    width: 100%;
    border-radius: 60px;
  }

  .gold_modal_com .photo_information .photo_text > div {
    height: 20px;
    line-height: 20px;
    font-size: 0.8rem;
    color: #999;
  }

  .gold_modal_com .photo_information .photo_text > div:nth-child(1) {
    color: #333;
    font-size: 1rem;
  }

  .gold_modal_com .go_right {
    height: 60px;
    line-height: 60px;
  }
</style>
